<template>
  <div>
    <FormMode :mode="formMode?.mode">
      <mci-form ref="autoFormRef" :model="autoForm" :rules="rules" label-width="auto" label-position="top">
        <!-- 调用方名称 -->
        <mci-form-item label="调用方名称" prop="appName">
          <mci-input
            v-model="autoForm.appName"
            :maxlength="INPUT_MAX_APP_NAME"
          />
        </mci-form-item>

        <!-- 调用方名称 -->
        <mci-form-item label="回调地址" prop="callbackUrl">
          <mci-input
            v-model="autoForm.callbackUrl"
            :maxlength="INPUT_MAX_APP_URL"
          />
        </mci-form-item>
      </mci-form>
    </FormMode>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { MciInput, MciForm, MciFormItem } from '@/components/base';

import { useFormMode } from '@/components/base/Form/mode';
import { ApplyAppForm, INPUT_MAX_APP_NAME, INPUT_MAX_APP_URL } from '../../data';

const emit = defineEmits(['change']);
const formMode = useFormMode();

// 表单
const autoFormRef = ref<any>();
const autoForm = reactive<ApplyAppForm>({
  appName: '',
  callbackUrl:  ''
});

const rules = reactive<any>({
  appName: [{ required: true, message: '请填写调用方名称', trigger: 'blur' }]
});

const resetForm = () => {
  autoForm.appName='';
  autoForm.callbackUrl= '';
};

defineExpose({ resetForm });

watch(
  [ () => autoForm],
  () => {
    emit('change', {
      ...autoForm
    });
  },
  { deep: true }
);
</script>
